Route

  • Code

    1. Configure Routes:

    Navigate to your project directory and open src/app/app-routing.module.ts. This file is where you define the routes for your application.

    
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    
    // Import components to be associated with routes
    import { HomeComponent } from './home/home.component';
    import { AboutComponent } from './about/about.component';
    import { ContactComponent } from './contact/contact.component';
    
    const routes: Routes = [
      { path: '', component: HomeComponent },
      { path: 'about', component: AboutComponent },
      { path: 'contact', component: ContactComponent },
      // Add more routes as needed
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }
    
    
    

    2. Create Components:

    
    ng generate component home
    ng generate component about
    ng generate component contact
    
    

    This will create home.component, about.component, and contact.component along with their necessary files.

    3. Add Router Outlet in App Component:

    
    <h1>My App</h1>
    <nav>
      <a routerLink="/">Home</a>
      <a routerLink="/about">About</a>
      <a routerLink="/contact">Contact</a>
    </nav>
    <router-outlet></router-outlet>